<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>


<section>
<div class="login-box">
    <form action="">
        <h2>Login</h2>
        <div class="input-box">
            <span class="icon"><ion-icon name="person-sharp"></ion-icon></span>
            <input type="text" required >
            <label>User</label>
        </div>
        <div class="input-box">
            <span class="icon"><ion-icon name="lock-closed-sharp"></ion-icon></ion-icon></span>
            <input type="password" required >
            <label>password</label>
        </div>

        <div class="remember-forgot">
            <label><input type="checkbox"> Remember me
            </label>
            <a href="#">Forgot Password</a>
        </div>
        <button type="submit">Login</button>
        <div class="register-link">

            <p>Don‘t have an account？<a href="#">Register</a></p>
        </div>
    </form>

</div>

</section>
<!--    使用登入图标的第一步。要引入js文件。-->
<script type="module" src="./js/ionicons.esm.js"></script>
<script nomodule src="./js/ionicons.js"></script>
</body>

</html>